import React, { Component } from 'react'
//受控组件
export default class FormCom extends Component {
  //1. 声明状态
  state = {
    user: '',
    pass: ''
  }

  //3. 声明事件的回调
  saveUser = (e) => {
    // console.log(e.target.value);
    //获得当前按下的按键信息
    let v = e.target.value;
    //更新状态
    this.setState({
      user: v
    })
  }

  savePass = (e) => {
    let v = e.target.value;
    this.setState({
      pass: v
    })
  }

  //登录的事件回调
  login = (e) => {
    //阻止默认行为
    e.preventDefault();
    //输出用户名和密码
    console.log(`用户名: ${this.state.user}  密码: ${this.state.pass}`)
  }

  //重置的事件回调
  reset = e => {
    //阻止默认行为
    e.preventDefault();
    //清空表单元素的值
    this.setState({
      user: '',
      pass: ''
    })
  }

  render() {
    return (
      <div>
        <h2>登录</h2>
        <hr />
        <form action="">
          {/* 2. 使用状态值, 设置 input 元素的 value 值   input 是受控, 受状态控制的 */}
          用户名: <input type="text" name='username' value={this.state.user} onChange={this.saveUser} /><br></br>
          密码: <input type="password" name='password' value={this.state.pass} onChange={this.savePass} /><br />
          <hr />
          <button onClick={this.login}>登录</button>
          <button onClick={this.reset}>重置</button>
        </form>
      </div>
    )
  }
}
